<!--
 * @Author: ygnnli 1585923072@qq.com
 * @Date: 2024-08-25 15:44:28
 * @LastEditors: ygnnli 1585923072@qq.com
 * @LastEditTime: 2024-08-26 17:04:36
 * @FilePath: /boost_searcher/wwwroot/index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
  <title>boost 搜索引擎</title>
  <style>
    /* 内padding外margin边距清零 */
    *{
      margin:0; 
      padding:0;
    }
    /* 标签选择器 将body内的内容100%和html---1:1比例匹配 */
    html,body
    {
      height:100%;
    }
    /* 以.开头--类选择器 */
    .container
    {
      width: 800px;
      margin:0px auto;/* 上下边距为0px，左右边距为auto自动，即水平居中 */
      margin-top: 30px;/* 上边距为30px */
    }
    /* 复合选择器,选中container类下的search类 */
    .container .search
    {
      /* 宽度与父标签一致 */
      width:100%;
      /* 高度设置为52px */
      height: 52px;
    }
    /* 先选中input标签 标签的名字不需要带'.',类需要带'.'  直接设置标签的属性,先要选中,input:标签选择器*/
    .container .search input
    {
      float:left;/* 左浮动 */
      width: 600px;
      height: 50px;
      /* input在进行高度设置的时候，没有考虑边框的问题 */
      border:1px solid black;/* 边框属性: 边框宽度为1px 样式:实线 颜色:黑色 */
      border-right: none;/*去掉右边框 */
      padding-left:10px;/* 设置左边内边距为10px */
      font-size: 16px;/* 设置字体大小为16px */
      color: #CCC;/* 设置字体颜色 */
    }
    
    .container .search button
    {
      float:left;/* 左浮动 */
      width: 150px;
      height: 52px;
      /* 设置button的背景颜色:#4e6ef2 */
      background-color:#4e6ef2;
      /* 设置button的字体颜色 */
      color:#FFF;
      /* 设置button的边框为none */
      border:none;
      /* 设置button的字体大小为18px */
      font-size: 18px;
      font-family: "微软雅黑";
    }

    .container .result
    {
      width: 100%;/* 宽度与父标签一致 */
    }

    .container .result .item
    {
      margin-top:15px;/* 设置上边距为15px */
    }

    .container .result .item a
    {
      display: block;/* 将a标签设置为块级元素: 单独占一行*/
      /* 去掉a标签的下划线 */
      text-decoration: none;
      font-size: 20px;/* 设置字体大小为20px */
      /* 设置字体的颜色 */
      color:#4e6ef2;
    }
    .container .result .item a:hover
    {
      text-decoration: underline;/* 设置鼠标悬停时显示下划线 */
    }

    .container .result .item p
    {
      margin-top:5px;/* 设置上边距为5px */
      /* 设置字体大小 */
      font-size: 16px;
      /*设置字体 */
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    .container .result .item i
    {
      display: block;/* 将a标签设置为块级元素: 单独占一行 */
      font-style: normal;/* 去掉斜体 默认是斜体的*/
      color:green;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="search">
      <input type="text" value="输入搜索关键字...">
      <button onclick="Search()">搜索一下</button> <!--设置一个点击事件 -->
    </div>
    <div class="result">

      <!-- 动态生成网页内容 -->


      <!-- <div class="item">
        <a href="#">这是标题</a>
        <p>这是内容事实上事实上少时诵诗书是撒是撒是撒是撒少时诵诗书少时诵诗书是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒</p>
        <i>https://www.boost.org/doc/libs/1_86_0/doc/html/boost_process/v2.html</i>
      </div>
      <div class="item">
        <a href="#">这是标题</a>
        <p>这是内容事实上事实上少时诵诗书是撒是撒是撒是撒少时诵诗书少时诵诗书是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒</p>
        <i>https://www.boost.org/doc/libs/1_86_0/doc/html/boost_process/v2.html</i>
      </div>
      <div class="item">
        <a href="#">这是标题</a>
        <p>这是内容事实上事实上少时诵诗书是撒是撒是撒是撒少时诵诗书少时诵诗书是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒</p>
        <i>https://www.boost.org/doc/libs/1_86_0/doc/html/boost_process/v2.html</i>
      </div>
      <div class="item">
        <a href="#">这是标题</a>
        <p>这是内容事实上事实上少时诵诗书是撒是撒是撒是撒少时诵诗书少时诵诗书是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒</p>
        <i>https://www.boost.org/doc/libs/1_86_0/doc/html/boost_process/v2.html</i>
      </div>
      <div class="item">
        <a href="#">这是标题</a>
        <p>这是内容事实上事实上少时诵诗书是撒是撒是撒是撒少时诵诗书少时诵诗书是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒</p>
        <i>https://www.boost.org/doc/libs/1_86_0/doc/html/boost_process/v2.html</i>
      </div>
      <div class="item">
        <a href="#">这是标题</a>
        <p>这是内容事实上事实上少时诵诗书是撒是撒是撒是撒少时诵诗书少时诵诗书是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒</p>
        <i>https://www.boost.org/doc/libs/1_86_0/doc/html/boost_process/v2.html</i>
      </div>
    </div> -->
  </div>
  <script>
    function Search()
    {
      /*浏览器的弹出框*/
      //alert("搜索功能尚未实现");
      // 1. 提取数据, $可以理解成就是JQuery的别称
      let query = $(".container .search input").val();
      if(query == '' || query == null)
      {
        alert("请输入搜索关键字/关键字无效!!!");
        return;
      }
      console.log("query = " + query);//console是浏览器的对话框，可以用来进行查看js数据

      // 2. 发送http请求,ajax: 属于一个和后端进行数据交互的函数，JQuery中的
      $.ajax({
        type:"GET",
        url:"/s?word=" + query,
        //如果发送成功，执行success函数
        success:function(data){
          console.log(data);
          BuildHtml(data);
        }
      });
    }

    function BuildHtml(data)
    {
      if(data == ''|| data == null)
    {
      alert("没有搜索到结果");
      document.write("<h1>没有搜索到结果</h1>");//会覆盖整个页面
      return;
    }
      // 获取html中的result标签
      let result_lable = $(".container .result");
      // 清空历史搜索结果:result标签中的内容
      result_lable.empty();

    //循环遍历data中的每一个元素(标题,内容,链接)
    //data是数组
    for(let elem of data)
    {
      console.log(elem.title);
      console.log(elem.url);

      let a_lable = $("<a>",{
        text:elem.title,
        href:elem.url,//设置链接地址
        //跳转到新的页面
        target:"_blank"
      });

      let p_lable = $("<p>",{
        text:elem.desc
      });

      let i_lable = $("<i>",{
        text:elem.url
      });

      let div_lable = $("<div>",{
        class:"item"
      });
      //将a标签添加到div标签中
      a_lable.appendTo(div_lable);
      p_lable.appendTo(div_lable);
      i_lable.appendTo(div_lable);

      div_lable.appendTo(result_lable);
    }

    }
  </script>
</body>
</html>
  </script>
</body>
</html>